<template>
  <div class="forms">
    <el-button type="primary" @click="addButton" class="addButton"
      >添加</el-button
    >
    <!-- 添加或编辑对话框 -->
    <el-dialog :title="title" :visible.sync="dialog.isShowDialog" width="50%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="角色名称" prop="rolename">
          <el-input v-model="ruleForm.rolename"></el-input>
        </el-form-item>
        <el-form-item label="角色权限" prop="menus">
          <el-scrollbar style="height: 200px" class="scrollbar">
            <el-tree
              ref="tree"
              :data="menuListData"
              show-checkbox
              node-key="id"
              :props="defaultProps"
              height="50"
            >
            </el-tree>
          </el-scrollbar>
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-switch
            :active-value="1"
            :inactive-value="2"
            inactive-color="#ff4949"
            v-model="ruleForm.status"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addRole" v-if="rid == ''"
          >确 定</el-button
        >
        <el-button type="primary" @click="editRole" v-else>确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getRoleAdd,
  getRoleInfo,
  getRoleEdit,
} from "../../../request/api";
import {mapGetters,mapActions} from 'vuex'
export default {
  props: ["dialog", "getRoleListData"],
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "title",
      },
      // 对话框标题
      title: "",
      // 角色id
      rid: "",
      // 添加表单数据
      ruleForm: {
        rolename: "", //角色名称
        menus: [], //角色权限
        status: 1, //状态1正常2禁用
      },
      // 验证规则
      rules: {
        rolename: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          { min: 2, max: 7, message: "长度在 2 到 7 个字符", trigger: "blur" },
        ],
      },
    };
  },
   computed:{
    // 导出菜单列表数据
    ...mapGetters({
      menuListData:"Menu/menuListData"
    }),
  },
  mounted() {
    this.getMenuListData();
  },
  methods: {
    // 重置表单项
    resetFiled() {
      this.ruleForm = {
        rolename: "",
        menus: [],
        status: 1,
      };
    },
    // 点击添加
    addButton() {
      this.rid = "";
      this.title = "添加角色";
      this.dialog.isShowDialog = true;
      this.resetFiled();
    },
    // 重置列表数据
    resetFrom() {
      // 重置表单项
      this.resetFiled();
      // 隐藏对话框
      this.dialog.isShowDialog = false;
      // 刷新列表数据
      this.$emit("refreshForm")
    },
    // 获取菜单列表
    ...mapActions({
      getMenuListData:"Menu/getMenuListData"
    }),
    // 添加角色
    addRole() {
      // 通过key值获取权限的id,并赋值给menus
      this.ruleForm.menus = JSON.stringify(this.$refs.tree.getCheckedKeys());
      getRoleAdd(this.ruleForm).then(
        (res) => {
          if ((res.data.code = 200)) {
            this.$message.success("添加成功");
            this.$refs.tree.setCheckedKeys([]);
            this.resetFrom();
          }
        },
        (err) => err
      );
    },
    // 获取一个角色的信息
    getOneRoleData(id) {
      // 修改对话框标题
      this.rid = id;
      this.title = "编辑角色";
      this.dialog.isShowDialog = true;
      // 展示编辑对话框
      getRoleInfo({ id }).then(
        (res) => {
          if (res.data.code == 200) {
            this.ruleForm = res.data.list;
            this.ruleForm.menus = JSON.parse(this.ruleForm.menus);
            this.$refs.tree.setCheckedKeys(this.ruleForm.menus);
          }
        },
        (err) => err
      );
    },
    // 编辑角色
    editRole() {
      let obj = {
        id: this.rid,
        ...this.ruleForm,
      };
      obj.menus = JSON.stringify(this.$refs.tree.getCheckedKeys());
      getRoleEdit(obj).then(
        (res) => {
          if (res.data.code == 200) {
            this.$message.success("编辑成功");
            this.$refs.tree.setCheckedKeys([]);
            this.resetFrom();
          }
        },
        (err) => err
      );
    },
    // 点击取消
    cancel() {
      this.$refs.tree.setCheckedKeys([]);
      this.dialog.isShowDialog = false;
    },
  },
};
</script>

<style>
.addButton {
  margin-bottom: 20px;
}
.scrollbar .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>